<template>
  <div>
    <el-empty v-show="!visible" description="暂无数据，请配置物模型"></el-empty>
    <el-tabs v-show="visible" class="tabs" v-model="activeName">
      <el-tab-pane label="精简模式" name="simple">
        <simple ref="simple"/>
      </el-tab-pane>
      <el-tab-pane label="高级模式" name="advanced">
        <advanced ref="Advanced"/>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
import { mapState } from 'vuex'
import Simple from './simple'
import Advanced from './advanced'

export default {
  // 功能页签页
  name: 'Function',
  components: {
    Simple,
    Advanced
  },
  created(){
    let metadata = JSON.parse(this.deviceDetailInfo.metadata)
    this.functions = metadata.functions || []
    this.visible = this.functions.length > 0;
  },
  data() {
    return {
      //功能列表
      functions: [],
      activeName: 'simple',
      visible: false,
    }
  },
  computed: {
    ...mapState({
      // 设备详情信息
      deviceDetailInfo: state => state.device.deviceDetailInfo,
    })
  },
  watch: {
    deviceDetailInfo(data) {
      let metadata = JSON.parse(data.metadata)
      this.functions = metadata.functions || []
      this.visible = this.functions.length > 0;
    },

    functions() {
      this.handleModel()
    },

    activeName() {
      this.handleModel()
    }

  },
  methods: {
    handleModel() {
      if (this.activeName === 'simple') {
        this.$refs.simple.handleSimpleModel(this.deviceDetailInfo.id, this.functions)
      } else if (this.activeName === 'advanced') {
        this.$refs.Advanced.handleAdvancedModel(this.deviceDetailInfo.id, this.functions)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.tabs ::v-deep .el-tabs__nav-wrap::after {
  background-color: #f4f4f4
}

</style>
